<template>
  <div>
    <div class="content">
      <div class="rowFlex columnCenter select">
        <miniAppSelect
          label="选择小程序"
          :is-resize="isResize"
          :multiple="true"
          @result="miniAppResult"
        />
        <el-button
          :disabled="selectAppList.length==0"
          style="margin-left: 20px;position: relative;top:2px;"
          class="button"
          @click="addTable"
        >添加</el-button>
      </div>
      <div class="table">
        <div class="title">配置同步栏位</div>
        <div class="tableContent">
          <div>
            <div class="tableHeader rowFlex columnCenter">
              <div style="padding-left:20px;width:200px;">小程序名称</div>
              <div style="width:400px;padding-left:20px;">关联栏位置</div>
              <div style="width:230px;padding-left:20px;">付费定价(虚拟币/集)</div>
              <div style="width:230px;">开始付费剧集</div>
              <div style="width:100px;padding-left:10px;">操作</div>
            </div>
          </div>
          <div
            v-if="target_config.length > 0"
            class="tableItemList"
          >
            <div
              v-for="(item, index) in target_config"
              :key="index"
              class="tableItem"
            >
              <div class="rowFlex allCenter rowItem">
                <div style="width:200px;padding-left:20px;">{{ item.name }}</div>
                <div style="padding-left:20px;width:400px;">
                  <div
                    v-if="index===0"
                    class="rowFlex columnCenter"
                  >
                    <el-popover
                      placement="bottom"
                      width="90"
                      trigger="click"
                    >
                      <div>
                        <el-checkbox-group
                          v-model="moduleList"
                          @change="checkBoxChange(index,$event)"
                        >
                          <el-checkbox
                            style="margin-top:5px"
                            label="1"
                          >热门</el-checkbox>
                          <el-checkbox
                            style="margin-top:5px"
                            label="2"
                          >排行</el-checkbox>
                          <el-checkbox
                            style="margin-top:5px"
                            label="3"
                          >介绍</el-checkbox>
                          <el-checkbox
                            style="margin-top:5px"
                            label="4"
                          >推荐</el-checkbox>
                        </el-checkbox-group>
                      </div>
                      <svg-icon
                        slot="reference"
                        icon-class="addIcon"
                        class="icon"
                      />
                    </el-popover>
                    <div class="displayList rowFlex  flexWarp columnCenter">
                      <div
                        v-for="(items, indexs) in item.module_id"
                        :key="indexs"
                        class="displayItem rowFlex columnCenter"
                        style="margin-left:10px;"
                      >
                        <span v-if="items==1">热门</span>
                        <span v-if="items==2">排行</span>
                        <span v-if="items==3">介绍</span>
                        <span v-if="items==4">推荐</span>
                        <i
                          class="el-icon-close displayClose"
                          @click="banberConfirm(indexs)"
                        ></i>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="showScoreEdit rowFlex">
                      <div
                        v-if="!item.module_id_is_show && item.module_id.length==0"
                        class="rowFlex columnCenter"
                        @mouseenter="mouseenter(index, 'module_id')"
                        @mouseleave="mouseleave(index, 'module_id')"
                      >
                        <span class="chapter_title">同上</span>
                        <div class="iconEdit">
                          <svg-icon
                            v-show="item.module_id_is_edit"
                            icon-class="edit2"
                            class="icon"
                            @click="editQualityIcon(index, 'module_id')"
                          />
                        </div>
                      </div>
                      <div
                        v-else
                        class="rowFlex"
                      >
                        <el-popover
                          placement="bottom"
                          width="90"
                          trigger="click"
                        >
                          <div>
                            <el-checkbox-group
                              v-model="moduleList"
                              @change="checkBoxChange(index,$event)"
                            >
                              <el-checkbox
                                label="1"
                                style="margin-top:5px"
                              >热门</el-checkbox>
                              <el-checkbox
                                label="2"
                                style="margin-top:5px"
                              >排行</el-checkbox>
                              <el-checkbox
                                label="3"
                                style="margin-top:5px"
                              >介绍</el-checkbox>
                              <el-checkbox
                                label="4"
                                style="margin-top:5px"
                              >推荐</el-checkbox>
                            </el-checkbox-group>
                          </div>
                          <svg-icon
                            slot="reference"
                            icon-class="addIcon"
                            class="icon"
                          />
                        </el-popover>
                        <div class="displayList rowFlex  flexWarp columnCenter">
                          <div
                            v-for="(items, indexs) in item.module_id"
                            :key="indexs"
                            class="displayItem rowFlex columnCenter"
                            style="margin-left:10px;"
                          >
                            <span v-if="items==1">热门</span>
                            <span v-if="items==2">排行</span>
                            <span v-if="items==3">介绍</span>
                            <span v-if="items==4">推荐</span>
                            <i
                              class="el-icon-close displayClose"
                              @click="banberConfirm(indexs)"
                            ></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="padding-left:20px;width:230px;">
                  <p v-if="index===0">
                    <el-input
                      v-model="pay_coin"
                      clearable
                      placeholder="请输入付费定价"
                      class="input"
                      oninput="value=value.replace(/[^0-9]/g, '')"
                    ></el-input>
                  </p>
                  <div
                    v-else
                    class="showScoreEdit"
                  >
                    <div
                      v-if="!item.pay_coin_is_show"
                      class="rowFlex columnCenter"
                      @mouseenter="mouseenter(index, 'pay_coin')"
                      @mouseleave="mouseleave(index, 'pay_coin')"
                    >
                      <span class="chapter_title">{{ item.pay_coin!=0?item.pay_coin:'同上' }}</span>
                      <div class="iconEdit">
                        <svg-icon
                          v-show="item.pay_coin_is_edit"
                          icon-class="edit2"
                          class="icon"
                          @click="editQualityIcon(index, 'pay_coin')"
                        />
                      </div>
                    </div>
                    <div v-else>
                      <el-input
                        v-model="editProps"
                        clearable
                        style="width: 120px"
                        @blur="blurEditIcon(index, 'pay_coin')"
                        @change="blurEditIcon(index, 'pay_coin')"
                      />
                    </div>
                  </div>
                </div>
                <div style="width:230px;">
                  <p v-if="index===0">
                    <el-input-number
                      v-model="start_chapter_num"
                      clearable
                      style="width:120px"
                      :min="0"
                      :max="100"
                      label="描述文字"
                    ></el-input-number>
                  </p>
                  <div
                    v-else
                    class="showScoreEdit"
                  >
                    <div
                      v-if="!item.start_chapter_num_is_show"
                      class="rowFlex columnCenter"
                      @mouseenter="mouseenter(index, 'start_chapter_num')"
                      @mouseleave="mouseleave(index, 'start_chapter_num')"
                    >
                      <span class="chapter_title">{{ item.start_chapter_num!=0?item.start_chapter_num:'同上' }}</span>
                      <div class="iconEdit">
                        <svg-icon
                          v-show="item.start_chapter_num_is_edit"
                          icon-class="edit2"
                          class="icon"
                          @click="editQualityIcon(index, 'start_chapter_num')"
                        />
                      </div>
                    </div>
                    <div v-else>
                      <el-input-number
                        v-model="editProps"
                        clearable
                        style="width:120px"
                        :min="0"
                        :max="100"
                        label="描述文字"
                        @blur="blurEditIcon(index, 'start_chapter_num',item)"
                      ></el-input-number>
                    </div>
                  </div>
                </div>
                <div style="width:100px;">
                  <div>
                    <el-popconfirm
                      icon="el-icon-info"
                      icon-color="red"
                      style="margin-left:10px;"
                      title="确定删除吗？"
                      @confirm="delRow(index)"
                    >
                      <el-button
                        slot="reference"
                        type="text"
                        size="medium"
                      >删除</el-button>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>

            <!-- 新上传的数据 -->
          </div>
          <div v-else>
            <div class="tableItem">
              <div class="rowFlex allCenter rowItem">
                <div style="text-align:center;">暂无数据</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        :loading="loading"
        class="btn"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import miniAppSelect from '@/common/component/form/miniAppSelect.vue'
import { syncPlaylet } from '@/api/content'
import { array } from 'jszip/lib/support'
export default {
  components: {
    miniAppSelect
  },
  computed: {
    ...mapState('user', ['miniAppList'])
  },
  props: ['checkedList'],
  data() {
    return {
      loading: false,
      selectAppList: [],
      editProps: 0,
      moduleList: [],
      pay_coin: 0,
      isResize: false,
      start_chapter_num: '',
      banberList: [
        { type: '1', name: '热门' },
        { type: '2', name: '排行' },
        { type: '3', name: '介绍' },
        { type: '4', name: '推荐' }
      ],
      rowIndex: 0,
      target_config: []
    }
  },
  mounted() {},
  methods: {
    mouseenter(index, prop) {
      this.$set(this.target_config[index], prop + '_is_edit', true)
      this.$forceUpdate()
    },
    mouseleave(index, prop) {
      this.$set(this.target_config[index], prop + '_is_edit', false)
      this.$forceUpdate()
    },
    blurEditIcon(index, prop) {
      this.$set(this.target_config[index], prop, this.editProps)
      this.$set(this.target_config[index], prop + '_is_show', false)
      this.$set(this.target_config[index], prop + '_is_input', false)
      this.$forceUpdate()
    },
    checkBoxChange(index, event) {
      this.$set(this.target_config[index], 'module_id', this.moduleList)
      this.$set(this.target_config[index], 'module_id_is_show', false)
      this.$set(this.target_config[index], 'module_id_is_input', false)
      this.$forceUpdate()
    },
    editQualityIcon(index, prop) {
      this.target_config.map((item) => {
        item.pay_coin_is_edit = false
        item.start_chapter_num_is_edit = false
        item.module_id_is_edit = false
        item.pay_coin_is_show = false
        item.module_id_is_show = false
        item.start_chapter_num_is_show = false
      })
      // this['is_' + prop] = true
      this.$set(this.target_config[index], prop + '_is_input', true)
      this.$set(this.target_config[index], prop + '_is_show', true)
      this.editProps = this.target_config[index][prop]
      prop === 'module_id' ? (this.moduleList = this.target_config[index].module_id) : ''
    },
    miniAppResult(value) {
      this.selectAppList = value
    },
    selectChange(value) {
      this.selectAppList = value
    },
    delRow(index) {
      this.target_config.splice(index, 1)
    },
    banberConfirm(index) {
      this.moduleList.splice(index, 1)
    },
    handleCommand(command) {
      if (this.moduleList.includes(command)) {
        this.$message.warning('该栏位已添加')
      } else {
        this.moduleList.push(command)
      }
    },
    addTable() {
      const list = []
      this.selectAppList.map((item) => {
        const obj = this.miniAppList.find((items) => items.id == item)
        list.push(obj)
      })
      this.selectAppList = []
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 20)
      this.target_config = this.removeDp(this.target_config, list, 'id')
      this.target_config.map((item) => {
        !item.module_id ? (item.module_id = []) : ''
        !item.pay_coin ? (item.pay_coin = 0) : ''
        !item.start_chapter_num ? (item.start_chapter_num = '') : ''
      })
    },
    removeDp(arr1, arr2, id) {
      let arr
      arr2 ? (arr = arr1.concat(arr2)) : (arr = arr1)
      const obj = {}
      const newArray = arr.reduce((pre, cur) => {
        if (!obj[cur[id]]) {
          obj[cur[id]] = true
          pre.push(cur)
        }
        return pre
      }, [])
      return newArray
    },
    remoteMethod(query) {
      if (query !== '') {
        setTimeout(() => {
          this.loading = false
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    },
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.loading = true
      if (this.target_config.length === 0) {
        this.$message.warning('请选择小程序')
        return
      }
      if (this.target_config.length === 0) {
        this.$message.warning('请选择小程序')
        return
      }
      if (this.pay_coin === 0) {
        this.$message.warning('请设置付费定价')
        return
      }
      if (this.start_chapter_num === '' || this.start_chapter_num === 0) {
        this.$message.warning('开始付费剧集')
        return
      }
      this.target_config[0].pay_coin = this.pay_coin
      this.target_config[0].start_chapter_num = this.start_chapter_num

      const list = this.target_config.map((item) => {
        return {
          mini_app_id: item.id,
          module_id: item.module_id.length === 0 ? this.target_config[0].module_id.toString() : item.module_id.toString(),
          pay_coin: item.pay_coin === 0 ? Number(this.target_config[0].pay_coin) : Number(item.pay_coin),
          start_chapter_num: item.start_chapter_num === 0 || item.start_chapter_num === '' ? this.target_config[0].pay_coin : item.start_chapter_num
        }
      })
      const data = {
        playlet_ids: this.checkedList,
        target_config: list
      }
      syncPlaylet(data).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.$emit('ok')
        }
        this.loading = false
      })
    }
  }
}
</script>
  <style lang="scss" scoped>
.content {
  width: 1000px;
  height: auto;
  padding: 20px;
  .table {
    margin-top: 20px;
  }
  .icon {
    font-size: 20px;
    cursor: pointer;
  }
  ::v-deep .item-label {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-bottom: 10px;
  }
  .select {
    ::v-deep .el-input__inner {
      width: 250px;
    }
  }
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-bottom: 10px;
  }
  .displayList {
    width: calc(100% - 20px);
  }
  .displayItem {
    width: auto;
    height: 28px;
    padding: 0 5px;
    margin-left: 10px;
    background: #f0f0f0;
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-radius: 5px;
  }
  .displayClose {
    font-size: 13px;
    cursor: pointer;
    color: #615f5f;
    margin-left: 3px;
  }
  .input {
    width: 120px !important;
    height: auto;
  }
}
.button {
  width: 56px;
  height: 32px;
  background: #f4f4f5;
  border-radius: 4px;
  margin-top: 25px;
}
.showScoreEdit {
  width: 100%;
  height: 100%;
  cursor: pointer;
  .icon {
    margin-left: 10px;
  }
}
.chapter_title {
  max-width: calc(100% - 30px);
  min-width: 30px;
  height: 20px;
  line-height: 20px;
  word-break: break-all;
}
.iconEdit {
  width: 30px;
}
.icon {
  margin-left: 10px;
}
.tableContent {
  width: 100%;
  height: auto;
  color: #909399;
  margin-bottom: 20px;
  font-weight: 500;
  .div {
    text-align: left;
  }
  .tableHeader {
    border-color: gray;
    background: #f7f8fa;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ebeef5;
  }
  .tableItem {
    line-height: 60px;
    border-bottom: 1px solid #ebeef5;
    .rowItem {
      height: 60px;
      line-height: 60px;
    }
  }
  .chapter_title {
    max-width: calc(100% - 30px);
    min-width: 30px;
    height: 20px;
    line-height: 20px;
    word-break: break-all;
  }
}
</style>

  <style>
.el-popover {
  min-width: 90px !important;
}
</style>